<template>
  <div class="app-container">
    <el-card>
      <!-- 操作区域 -->
      <el-row type="flex" justify="space-between">
        <el-col :span="18">
          <el-form inline :model="formData">
            <el-form-item prop="username">
              <el-input
                v-model="formData.username"
                size="small"
                placeholder="管理员账号"
              />
            </el-form-item>
            <el-form-item prop="email">
              <el-input
                v-model="formData.email"
                size="small"
                placeholder="管理员邮箱"
              />
            </el-form-item>
            <el-form-item prop="status">
              <el-select
                v-model="formData.status"
                clearable
                size="small"
                placeholder="全部"
              >
                <el-option label="全部" value="" />
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                plain
                type="primary"
                size="small"
                @click="onSubmit"
              >搜索</el-button>
              <el-button size="small" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <div class="btn-col4">
            <el-button
              type="primary"
              size="small"
              plain
              @click="addFn"
            >创建用户</el-button>

          </div>
        </el-col>
      </el-row>

      <!-- 表格区域 -->
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="id" label="管理员ID" width="90" />
        <el-table-column prop="username" label="管理员姓名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="email" label="管理员邮箱" />
        <el-table-column prop="avatar" label="管理员头像">
          <template slot-scope="{row}">
            <img v-imgpix="require('@/assets/head.jpg')" :src="showUrl(row.avatar)" alt="" height="80px">
          </template>
        </el-table-column>
        <el-table-column prop="" label="角色">
          <template slot-scope="{row}">
            <el-tag
              v-for="(item,index) in row.roles_names"
              :key="index"
            >
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="添加时间" width="160" />
        <el-table-column label="状态" prop="status">
          <template slot-scope="{row}">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="2"
              @change="changeStatus($event,row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="editFn(row.id)"
            />
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="delFn(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页区域 -->
      <el-pagination
        :current-page.sync="pageData.page"
        :page-sizes="[2, 6, 8, 10]"
        :page-size="pageData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </el-card>
    <!-- 弹框 -->
    <addUser ref="addUser" @updateList="getPerUserList" />

  </div>
</template>

<script>
import addUser from './components/addUser.vue'
import {
  getPerUserList,
  getPerUserInfo,
  delPerUser,
  changeStatus

} from '@/api/permission-user'
export default {
  components: {
    addUser
  },
  data() {
    return {
      isShow: false, // 控制批量启用等三个按钮的显示隐藏
      formData: {
        // 搜索框变量
        username: '',
        status: '',
        email: ''
      },
      total: 0, // 数据总条数
      list: [], // 列表数据
      pageData: {
        // 初始化数据
        page: 1,
        limit: 2
      },
      treeData: [], // 归属学科
      classList: [] // 归属班级
    }
  },
  created() {
    // 调用列表数据
    this.getPerUserList()
  },
  methods: {
    // 获取列表数据
    async getPerUserList() {
      const res = await getPerUserList({ ...this.formData, ...this.pageData })
      // console.log(res)
      this.list = res.list
      this.total = res.total
    },
    // 每页数量变化的时候
    sizeChange(newSize) {
      // newSize 最新的每页数量
      this.pageData.limit = newSize
      this.getPerUserList()
    },
    // 页码变化事件
    currentChange(newPage) {
      // newPage 最新的页码
      this.pageData.page = newPage
      this.getPerUserList()
    },
    // 搜索提交
    onSubmit() {
      // 页码变成1
      this.pageData.page = 1
      // 拉取列表
      this.getPerUserList()
    },
    // 搜索重置
    onReset() {
      // 重置搜索表单
      this.formData = {
        username: '',
        status: '',
        email: ''
      }
      // 拉取列表
      this.getPerUserList()
    },
    // 图片展示:
    showUrl(url) {
      return process.env.VUE_APP_BASE_API + '/' + url
    },
    // 添加学员 // 打开弹框
    addFn() {
      this.$refs.addUser.dialogShow = true
    },
    // 点击编辑,回显
    async editFn(id) {
      const res = await getPerUserInfo(id)
      console.log(res)
      this.$refs.addUser.formData = res
      this.$refs.addUser.dialogShow = true
    },
    // 删除事件
    async delFn(id) {
      // 弹出确认框
      await this.$confirm(
        `确认删除吗?此操作不可恢复`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      // 发生删除请求
      await delPerUser(id)
      // 边缘问题：如果不是第一页，且这一页只有一个，且删除成功，页码需要-1
      if (this.pageData.page > 1 && this.list.length === 1) {
        this.pageData.page--
      }
      // 列表更新
      this.getPerUserList()
    },
    // 修改状态
    async changeStatus(val, id) {
      await changeStatus({ id: id, status: val })
      this.$message.success('修改成功')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .btn-col4 {
  margin-top: 6px;
}
</style>
